<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>上级配套奖励</h2>
        </template>
      </PageTitle>

      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" border :data="list" max-height="500px" style="margin-top: 20px;">
        <el-table-column label="申请企业" align="center" prop="companyname" width="260" fixed />
        <el-table-column label="统一社会信用代码" prop="credit_code" width="180" />
        <el-table-column label="基地类型" prop="practice_type" width="100">
          <template slot-scope="{row}">
            {{ row.practice_type|practiceType }}
          </template>
        </el-table-column>
        <el-table-column label="奖励金额" align="center" prop="money" width="140">
          <template slot-scope="{row}">
            {{ row.money }}元
          </template>
        </el-table-column>
        <el-table-column label="企业性质" prop="nature_name" width="100" />
        <el-table-column label="所属地区" prop="trade_name" width="140">
          <template slot-scope="{row}">{{ row.district1_name }}{{ row.district2_name }}{{ row.district_name }}</template>
        </el-table-column>
        <el-table-column label="初审状态" align="center" prop="preliminary" width="120">
          <template slot-scope="{row}">
            <el-tag :type="row.preliminary|statusTag">
              {{ row.preliminary|auditingStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="复审状态" align="center" prop="status_b" width="120">
          <template slot-scope="{row}">
            <el-tag :type="row.status_b|statusTag">
              {{ row.status_b|auditingStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="120">
          <template slot-scope="{row}">
            <el-tag :type="row.status|statusFilter">
              {{ row.status|trafficStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" prop="passengers" width="180">
          <template slot-scope="{row}">
            {{ row.created_at|timeStanp }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-row type="flex" align="middle" style="margin-left: 20px;">
      <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
    </el-row>

  </div>
</template>
<script>
import { GetBaseSuperiorList } from '@/api/user'
import user from '@/store/modules/user'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        4: 'success',
        2: 'primary',
        3: 'warning',
        6: 'danger',
        5: 'info',
        7: 'success'
      }
      return statusMap[status]
    },
    statusTag(status) {
      const statusMap = {
        1: 'success',
        0: 'warning',
        2: 'danger',
        5: 'info'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      activeName: '0',
      activeIndex: '0',
      downloadLoading: false,
      list: [],
      count: 0,
      statusData: [
        { id: 3, name: '未知' },
        { id: 1, name: '是' },
        { id: 2, name: '否' }
      ],
      query: {
        bid: undefined,
        status: undefined,
        created_start: '',
        created_end: '',
        page: 1,
        limit: 10
      },

      showDialog: false,
      permData: [],
      defaultProps: {
        label: 'name'
      },
      value: '',
      inputValue: '',
      filteredOptions: [],
      adminInfo: {},
      imgUrl: { url: '', name: '' },
      fileList: [],
      practice: {},
      internship_user: [],
      user_data: {},
      company: {},
      showDialogB: false,
      content: '',
      traffic_data: {},
      modelList: [],
      com_status: undefined,
      preliminary: undefined,
      Fstatus: undefined
    }
  },
  created() {
    this.query.bid = parseInt(user.state.userInfo.bid)
    this.getInter()
  },
  methods: {

    // 获取列表
    async getInter() {
      this.downloadLoading = true
      const { count, list } = await GetBaseSuperiorList(this.query)
      this.count = count
      this.list = list
      this.downloadLoading = false
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getInter()
    },

    // 取消弹窗驳回
    btnCanleB() {
      this.content = ''
      this.showDialogB = false
    },

    // 搜索
    search() {
      this.query.page = 1
      this.getInter()
    },
    // 取消
    btnCanle() {
      this.formData = {
        comid: parseInt(user.state.userInfo.bid),
        city: '',
        id: undefined,
        full_name: '',
        province: '',
        school_type: 1,
        school: '',
        qualification: undefined,
        id_card_left: '',
        id_card_right: '',
        qualification_img: '',
        phone: '',
        bank: '',
        bank_no: '',
        bank_img: '',
        status: 2,
        status_img: '',
        start_at: undefined
      }
      this.$refs.idCardLeftPhoto.fileList = []
      this.$refs.idCardRightPhoto.fileList = []
      this.$refs.qualificationImgPhoto.fileList = []
      this.$refs.provePhoto.fileList = []
      this.showDialog = false
    },
    openDialogF() {
      if (this.formData.id_card_left) {
        const imgUrl = this.formData.id_card_left.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.idCardLeftPhoto.fileList = NewArr
      } else {
        this.$refs.idCardLeftPhoto.fileList = []
      }
      if (this.formData.id_card_right) {
        const imgUrl = this.formData.id_card_right.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.idCardRightPhoto.fileList = NewArr
      } else {
        this.$refs.idCardRightPhoto.fileList = []
      }
      if (this.formData.qualification_img) {
        const imgUrl = this.formData.qualification_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.qualificationImgPhoto.fileList = NewArr
      } else {
        this.$refs.qualificationImgPhoto.fileList = []
      }
      if (this.formData.prove) {
        const imgUrl = this.formData.prove.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.provePhoto.fileList = NewArr
      } else {
        this.$refs.provePhoto.fileList = []
      }
      if (this.formData.practice_img) {
        const imgUrl = this.formData.practice_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.practice_img.fileList = NewArr
      } else {
        this.$refs.practice_img.fileList = []
      }
      if (this.formData.status_img) {
        const imgUrl = this.formData.status_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.status_img.fileList = NewArr
      } else {
        this.$refs.status_img.fileList = []
      }
    },
    // 给图片赋值
    openDialog() {
      if (this.traffic_data.roster) {
        const imgUrl = this.traffic_data.roster.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.roster.fileList = NewArr
      } else {
        this.$refs.roster.fileList = []
      }
    }
  }
}
</script>
<style scoped lang="scss">
.shopOrder-dialog{
  height: auto;
  max-height: 600px;
  overflow-y: auto;
}
.fujian-box{
  padding-bottom: 50px;
  label{
    font-size: 15px;
    font-weight: bold;
  }
  .item-xbox{
    flex-wrap: wrap;
  }
  .item-fujian{
    margin-top: 20px;
    margin-right: 10px;
    width: 14%;
    flex-direction: column;
    .item-img{
      width: 70%;
      img{
        width: 100%;
      }
    }
  }
  .item-title{
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
  }
}
.base{
  padding: 20px 30px;
  display: flex;
  .logo{
    width: 118px;
    height: 118px;
    margin-right: 20px;
    background-color: #ebeef5;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    img{
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }
  .info{
    flex: 1;
    .title{
      padding: 5px 0 18px;
      display: flex;
      .name{
        font-size: 20px;
        height: 20px;
        color: #303033;
        font-weight: 600;
        margin-right: 10px;
      }
      .user{
        padding-top: 6px;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        color: #777;
        .logoin{
          color: #0078ff;
          cursor: pointer;
        }
      }
      .qcc_box{
        width: 63px;
        height: 20px;
        position: absolute;
        right: 30px;
        z-index: 30;
        cursor: pointer;
        a{
          cursor: pointer;
          color: inherit;
          text-decoration: none;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .details{
      max-width: 100%;
      .line{
        margin-bottom: 15px;
        .line_label{
          color: #777;
          font-size: 14px;
          line-height: 14px;
          font-weight: 400;
        }
        .text{
          display: inline-block;
          font-size: 14px;
          line-height: 14px;
        }
        .text_color{
          color: #0078ff;
          cursor: pointer;
        }
      }
    }
  }
}
.bind_icon{
  display: inline-block;
  float: left;
  margin-right: 5px;
}
.tab_box{
  padding:0 30px;
}
.clientInfo_wrapper{
  height: calc(100vh - 246px);
    overflow-y: auto;
}
.tables{
  padding: 20px 0px;
}
  .title_t{
    font-weight: 700;
    font-size: 16px;
    margin-left: 20px;
  }
  .table_content{
    margin-top: 30px;
  }
  .img_box{
    margin-top: 30px;
  }
  .btnOk-ljm{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
  .btnFoot{
    width: 100%;
    position:absolute;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
